<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
    rel="stylesheet">

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  <link rel="stylesheet" href="event.css" />

  <title>Introduction to Open Source</title>
</head>

<body>
  <div class="container">
    <h1 class="title">Introduction to <span> Open Source</span></h1>
    <a href="#" class="btn">REGISTER</a>

    <h2 class="heading">OUR SPEAKERS</h1>

      <section class="card-section">

        <section class="card">
          <img src="boy.png" />
          <div>
            <h3>Mr ABC</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut illum,
              qui hic facere consequatur dolorem temporibus minima non praesentium
              distinctio. Repellat autem asperiores reprehenderit tenetur facere,
              placeat aliquam assumenda molestias?
            </p>
          </div>
        </section>
        <section class="card" data-aos="fade-up">
          <img src="boy.png" />
          <div>
            <h3>Mr ABC</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut illum,
              qui hic facere consequatur dolorem temporibus minima non praesentium
              distinctio. Repellat autem asperiores reprehenderit tenetur facere,
              placeat aliquam assumenda molestias?
            </p>
          </div>
        </section>

        <section class="card" data-aos="fade-down">
          <img src="boy.png" />
          <div>
            <h3>Mr ABC</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut illum,
              qui hic facere consequatur dolorem temporibus minima non praesentium
              distinctio. Repellat autem asperiores reprehenderit tenetur facere,
              placeat aliquam assumenda molestias?
            </p>
          </div>
        </section>
        <section class="card" data-aos="fade-up">
          <img src="boy.png" />
          <div>
            <h3>Mr ABC</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut illum,
              qui hic facere consequatur dolorem temporibus minima non praesentium
              distinctio. Repellat autem asperiores reprehenderit tenetur facere,
              placeat aliquam assumenda molestias?
            </p>
          </div>
        </section>
        <section class="card" data-aos="fade-down">
          <img src="boy.png" />
          <div>
            <h3>Mr ABC</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut illum,
              qui hic facere consequatur dolorem temporibus minima non praesentium
              distinctio. Repellat autem asperiores reprehenderit tenetur facere,
              placeat aliquam assumenda molestias?
            </p>
          </div>
        </section>
        <section class="card" data-aos="fade-up">
          <img src="boy.png" />
          <div>
            <h3>Mr ABC</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut illum,
              qui hic facere consequatur dolorem temporibus minima non praesentium
              distinctio. Repellat autem asperiores reprehenderit tenetur facere,
              placeat aliquam assumenda molestias?
            </p>
          </div>
        </section>

        <section class="card" data-aos="fade-down">
          <img src="boy.png" />
          <div>
            <h3>Mr ABC</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut illum,
              qui hic facere consequatur dolorem temporibus minima non praesentium
              distinctio. Repellat autem asperiores reprehenderit tenetur facere,
              placeat aliquam assumenda molestias?
            </p>
          </div>
        </section>
      </section>

      <br>

      <footer>
        <div>
          <h2>DATE- 1st November, 2021</h2>

          <h2>TIME- 5:30PM (IST) - 8:30PM (IST)</h2>

          <h2>VENUE- Online</h2>
        </div>
  </div>
  </footer>

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init({
      offest: 400,
      duration: 800,
    });
  </script>
</body>

</html>